<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <!-- 热门 -->
      <template #is_hot="{ record }">
        <a-switch
          :checked-value="1" 
          unchecked-value="0"
          @change="switchStatus($event, record, 'is_hot')"
          :default-checked="record.is_hot == 1"
        />
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
          :checked-value="1" 
          unchecked-value="0"
          @change="switchStatus($event, record, 'status')"
          :default-checked="record.status == 1"
        />
      </template>
      <template #operationBeforeExtend="{ record }">
        <a-link
            v-auth="['admin:car:read']"
            @click="readAction(record.id)"
        ><icon-eye /> 查看</a-link>
        <a-link @click="openInsurance(record)"><icon-list /> 保险配置</a-link>
        <a-link @click="openPrice(record)"><icon-list /> 价格配置</a-link>
      </template>
    </ma-crud>

    <read ref="readRef" :column="readColumns" />
    <Insurance ref="insurance"></Insurance>
    <PriceForm ref="priceform"></PriceForm>
    
  </div>
</template>
<script setup>
import { ref, reactive, h } from 'vue'
import car from '@/api/admin/car'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import Read from '@/components/read/index.vue'
import Insurance from './insurance.vue'
import PriceForm from './priceForm.vue'

const crudRef = ref()
const insurance = ref()
const priceform = ref()

const numberOperation = (record, newValue, numberName) => {
  car.numberOperation({ id: record.id, numberName, numberValue: newValue }).then( res => {
    if (res.success) {
      Message.success(res.message)
      record[numberName] = newValue
    }
  }).catch( e => { console.log(e) } )
}


const switchStatus = (statusValue, record, statusName) => {
  car.changeStatus({ id: record.id, statusName, statusValue }).then( res => {
    if (res.success) {
      Message.success(res.message)
      record[statusName] = statusValue
    }
  }).catch( e => { console.log(e) } )
}


const options = reactive({
  id: 'car',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationColumnWidth: 260,
  operationColumnFixed: 'right',
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: car.getList,
  // recycleApi: car.getRecycleList,
  requestParams: { orderBy: ['id'], orderType: 'desc' },
  beforeRequest: (params) => {
    console.log('params', params)
    return params;
  },
  add: {
    show: true,
    api: car.save,
    auth: ['admin:car:save']
  },
  edit: {
    show: true,
    api: car.update,
    auth: ['admin:car:update']
  },
  delete: {
    show: true,
    api: car.deletes,
    auth: ['admin:car:delete'],
    realApi: car.realDeletes,
    realAuth: ['admin:car:realDeletes']
  },
  /*recovery: {
    show: true,
    api: car.recoverys,
    auth: ['admin:car:recovery']
  },
  import: {
    show: true,
    url: 'admin/car/import',
    templateUrl: 'admin/car/downloadTemplate',
    auth: ['admin:car:import']
  },
  export: {
    show: true,
    url: 'admin/car/export',
    auth: ['admin:car:export']
  }*/
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "车辆分类",
    dataIndex: "car_category_ids",
    formType: "select",
    commonRules: {
      required: true,
      message: "请选择车辆分类"
    },
    dict: {
      url: "admin/carCategory/dict",
      props: {
        label: 'name',
        value: 'id'
      }
    },
    multiple: true,
    customRender: ({ record }) => {
      let html = [];
      for (const carCategoryText of record.car_category_texts) {
        html.push(h('div', {
          class: ['arco-tag', 'arco-tag-checked', 'arco-tag-green', 'mt-1'],
        }, carCategoryText))
      }
      return h('div', {
        class: ['arco-row']
      }, html);
    }
  },
  {
    title: "轮播图",
    dataIndex: "banner",
    formType: "upload",
    extra: "建议尺寸xxx",
    hide: true,
    commonRules: {
      required: true,
      message: "请输入轮播图"
    },
    multiple: true,
    onlyData: true,
    returnType: "url",
    chunk: false,
    type: "image"
  },
  {
    title: "封面图",
    dataIndex: "cover",
    formType: "upload",
    extra: "建议尺寸xxx",
    commonRules: {
      required: true,
      message: "请输入封面图"
    },
    onlyData: true,
    returnType: "url",
    multiple: false,
    chunk: false,
    type: "image"
  },
  {
    title: "名称",
    dataIndex: "name",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入名称"
    }
  },
  {
    title: "单价(天)",
    dataIndex: "price",
    formType: "input",
    commonRules: {
      required: true,
      message: "请输入单价(天)"
    },
    width: 80
  },
  {
    title: '热门', dataIndex: 'is_hot', search: true, formType: 'radio',
    dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
    addDefaultValue: '1', width: 60
  },
  {
    title: '状态', dataIndex: 'status', search: true, formType: 'radio',
    dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
    addDefaultValue: '1', width: 60
  },
  {
    title: "描述",
    dataIndex: "describe",
    formType: "input",
    width: 220,
    commonRules: {
      required: true,
      message: "请输入描述"
    }
  },
  {
    title: "基础配置",
    dataIndex: "base_config",
    formType: "children-form",
    type: "table",
    emptyRow: 0,
    formList: [
      {
        title: "名称",
        dataIndex: "key",
        hideLabel: true,
        rules: {
          required: true,
          message: "请输入名称"
        }
      },
      {
        title: "描述",
        dataIndex: "value",
        hideLabel: true,
        rules: {
          required: true,
          message: "请输入描述"
        }
      }
    ],
    hide: true,
    commonRules: {
      required: true,
      message: "请输入基础配置"
    }
  },
  {
    title: "突出配置",
    dataIndex: "high_light_config",
    formType: "children-form",
    type: "table",
    emptyRow: 0,
    formList: [
      {
        title: "名称",
        dataIndex: "key",
        hideLabel: true,
        rules: {
          required: true,
          message: "请输入名称"
        }
      },
      {
        title: "描述",
        dataIndex: "value",
        hideLabel: true,
        rules: {
          required: true,
          message: "请输入描述"
        }
      }
    ],
    hide: true,
    commonRules: {
      required: true,
      message: "请输入突出配置"
    }
  },
  {
    title: "下单量",
    dataIndex: "volume",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    width: 60
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    showTime: true
  },
  // {
  //   title: "更新时间",
  //   dataIndex: "updated_at",
  //   formType: "date",
  //   addDisplay: false,
  //   editDisplay: false,
  //   showTime: true
  // }
])

const readRef = ref()
const readColumns = reactive([
  {
    title: "车辆分类",
    dataIndex: "car_category_texts",
    readonly: true,
    allowClear: false,
  },
  {
    title: "封面图",
    dataIndex: "cover",
    formType: "upload",
    returnType: "url",
    disabled: true,
  },
  {
    title: "名称",
    dataIndex: "name",
    readonly: true,
    allowClear: false,
  },
  {
    title: "单价(天)",
    dataIndex: "price",
    readonly: true,
    allowClear: false,
  },
  {
    title: "描述",
    dataIndex: "describe",
    readonly: true,
    allowClear: false,
  },
  {
    title: "下单量",
    dataIndex: "volume",
    readonly: true,
    allowClear: false,
  },
  {
    title: "基础配置",
    dataIndex: "base_config",
    formType: "children-form",
    type: "table",
    emptyRow: 0,
    hideOperate: true,
    formList: [
      {
        title: "名称",
        dataIndex: "key",
        readonly: true,
        allowClear: false,
        hideLabel: true,
      },
      {
        title: "描述",
        dataIndex: "value",
        readonly: true,
        allowClear: false,
        hideLabel: true,
      }
    ],
  },
  {
    title: "突出配置",
    dataIndex: "high_light_config",
    formType: "children-form",
    type: "table",
    emptyRow: 0,
    hideOperate: true,
    formList: [
      {
        title: "名称",
        dataIndex: "key",
        readonly: true,
        allowClear: false,
        hideLabel: true,
      },
      {
        title: "描述",
        dataIndex: "value",
        readonly: true,
        allowClear: false,
        hideLabel: true,
      }
    ],
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    readonly: true,
    allowClear: false,
  },
])
const readAction = async (id) => {
  const response = await car.read(id)
  if (response.success) {
    readRef.value.open(response.data)
  } else {
    Message.info(response.message)
  }
}
const openInsurance = async (row) => {
  insurance.value.open(row)
}
const openPrice = async (row) => {
  priceform.value.open(row)
}
</script>
<script> export default { name: 'admin:car' } </script>
